<template>
  <div class="app-home" @click.stop="openDirectoryData = false">
    <div class="app-home-title-list">
      <img
        class="directory"
        @click.stop="openDirectory"
        style="
          width: 30px;
          cursor: pointer;
          display: block;
          z-index: 10;
          display: flex;
        "
        src="@/assets/image/目录.png"
        alt=""
      />
      <div
        class="directory-box"
        :class="openDirectoryData ? 'open' : ''"
        @click.stop
      >
        <div class="fontcolor" style="margin-top: 10px; font-size: 14px">
          收藏标题
        </div>
        <el-icon class="icon" color="#fff" @click="addTitle"
          ><CirclePlus
        /></el-icon>
        <div
          style="margin: 0 auto 10px; overflow-y: auto; width: 120px"
          v-if="titleList.length > 0"
        >
          <div
            style="
              margin-top: 10px;
              font-size: 14px;
              cursor: pointer;
              color: #fff;
              position: relative;
            "
            v-for="item in titleList"
            :key="item.id"
            @click.stop="changeCollect(item)"
            :class="active == item.id ? 'active' : ''"
          >
            {{ item.collect_title }}
            <el-popconfirm
              title="Are you sure to delete this?"
              @confirm.stop="removeTitle(item.id)"
            >
              <template #reference>
                <el-icon
                  style="position: absolute; right: 10px; top: 0"
                  @click.stop
                  ><DeleteFilled /></el-icon
              ></template>
            </el-popconfirm>
          </div>
        </div>
        <div
          v-else
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            color: #fff;
            align-items: center;
          "
        >
          暂无数据
        </div>
      </div>
    </div>
    <div class="app-home-content">
      <h4 class="fontcolor" style="text-align: center; font-size: 24px">
        {{ title }}
      </h4>
      <div class="addCollect" @click="addCollect">新增收藏</div>
      <div
        class="content-box"
        v-if="contentList?.length > 0"
        style="margin-top: 20px"
      >
        <div
          style="display: flex; margin-top: 10px"
          v-for="item in contentList"
          :key="item.collect_id"
        >
          <div class="fontcolor" style="margin-right: 20px; width: 250px">
            网站名称：{{ item.collect_name }}
          </div>
          <div
            class="fontcolor"
            style="
              margin-right: 20px;
              width: 500px;
              word-break: break-all;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            网站地址：<a :href="item.collect_url">{{ item.collect_url }}</a>
          </div>
          <div style="">
            <el-popconfirm
              title="Are you sure to delete this?"
              @confirm.stop="removeContent(item)"
            >
              <template #reference>
                <el-icon style="margin-right: 20px; cursor: pointer" @click.stop
                  ><DeleteFilled /></el-icon
              ></template>
            </el-popconfirm>
            <el-icon style="cursor: pointer" @click="EditHandler(item)"
              ><Edit
            /></el-icon>
          </div>
        </div>
      </div>
      <div
        class="fontcolor"
        style="
          width: 100%;
          height: 100%;
          display: flex;
          font-size: 30px;
          justify-content: center;
          align-items: center;
        "
        v-else
      >
        暂无数据
      </div>
    </div>
    <Dialog ref="dialog" :title="openName" width="500px">
      <template #default>
        <el-form :rules="rules" :model="form" ref="form">
          <el-form-item label="网站名称：" prop="webName">
            <el-input
              v-model="form.webName"
              placeholder="请输入网站名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="网站地址：" prop="webUrl">
            <el-input
              v-model="form.webUrl"
              placeholder="请输入网站地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属标题：" prop="titleId">
            <el-select
              v-model="form.titleId"
              placeholder="请选择所属标题"
              :disabled="openName == '修改收藏'"
            >
              <el-option
                v-for="item in titleList"
                :key="item.id"
                :label="item.collect_title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </Dialog>
    <Dialog ref="dialog1" title="新增标题">
      <template #default>
        <el-form :rules="rules" :model="form1" ref="form1">
          <el-form-item label="网站名称：" prop="titleName">
            <el-input
              v-model="form1.titleName"
              placeholder="请输入标题名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitTi">确定</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { getInfo, upload } from '@/api/login'
import { getCollectTitleList, getCollectContent, addCollectContent, addCollectTitle, deleteCollectTitle, deleteCollectContent, updateCollectContent } from '@/api/collect'
import Dialog from '@/components/Dialog'
export default {
  name: 'Home',
  components: {
    Dialog
  },
  data() {
    return {
      openDirectoryData: false,
      titleList: [],
      contentList: [],
      active: 1,
      title: '',
      dialogShow: false,
      openName: '',
      form: {
        webName: '',
        webUrl: '',
        titleId: '',
        UserId: localStorage.getItem('userId')
      },
      form1: {
        titleName: '',
        UserId: localStorage.getItem('userId')
      },
      rules: {
        webName: [
          {
            required: true,
            message: '请输入网站名称',
            trigger: 'change'
          }
        ],
        webUrl: [
          {
            required: true,
            message: '请输入网站地址',
            trigger: 'change'
          }
        ],
        titleId: [
          {
            required: true,
            message: '请选择所属标题',
            trigger: 'change'
          }
        ]
      },
      rules1: {
        titleName: [
          {
            required: true,
            message: '请输入标题名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    getInfos() {
      getInfo({ UserId: localStorage.getItem('userId') }).then(res => {
        console.log(res)
      })
    },
    openDirectory() {
      this.openDirectoryData = !this.openDirectoryData
      if (this.openDirectoryData) {
        this.getcollect()
      }
    },
    getcollect() {
      getCollectTitleList({ UserId: localStorage.getItem('userId') }).then(res => {
        this.titleList = res.data
      })
    },
    changeCollect(data) {
      this.active = data.id
      this.title = data.collect_title
      getCollectContent({ UserId: localStorage.getItem('userId'), titleId: data.id }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '获取收藏内容成功',
            type: 'success'
          })
          this.contentList = res.data
        }
        this.openDirectoryData = false
      })
    },
    addCollect() {
      this.$refs.dialog.open()
      this.openName = '添加收藏'
      this.form = {
        webName: '',
        webUrl: '',
        titleId: '',
        UserId: localStorage.getItem('userId')
      },
        this.getcollect()
    },
    addTitle() {
      this.$refs.dialog1.open()
      this.form1 = {
        titleName: '',
        UserId: localStorage.getItem('userId')
      }
    },
    closeDialog() {
      this.$refs.dialog.close()
      this.$refs.dialog1.close()
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.openName == '添加收藏') {
            addCollectContent(this.form).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '新增收藏成功',
                  type: 'success'
                })
                this.closeDialog()
                this.active = this.form.titleId
                this.title = this.titleList.find(item => item.id == this.form.titleId).collect_title
                getCollectContent({ UserId: localStorage.getItem('userId'), titleId: this.form.titleId }).then(res => {
                  if (res.code == 200) {
                    this.contentList = res.data
                  }
                })
              }
            })
          } else {
            updateCollectContent(this.form).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '修改收藏成功',
                  type: 'success'
                })
                this.closeDialog()
                this.active = this.form.titleId
                this.title = this.titleList.find(item => item.id == this.form.titleId).collect_title
                getCollectContent({ UserId: localStorage.getItem('userId'), titleId: this.form.titleId }).then(res => {
                  if (res.code == 200) {
                    this.contentList = res.data
                  }
                })
              }
            })
          }
        }
      })
    },
    submitTi() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          addCollectTitle(this.form1).then(res => {
            if (res?.code == 200) {
              this.$message({
                message: '新增标题成功',
                type: 'success'
              })
              this.closeDialog()
            }
          })
        }
      })
    },
    removeTitle(id) {
      deleteCollectTitle({ titleId: id, UserId: localStorage.getItem('userId') }).then(res => {
        if (res?.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getcollect()
        }
      })
    },
    removeContent(data) {
      deleteCollectContent({ titleId: data.parent_id, UserId: localStorage.getItem('userId'), ContentId: data.collect_id }).then(res => {
        if (res?.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          getCollectContent({ UserId: localStorage.getItem('userId'), titleId: data.parent_id }).then(res => {
            if (res.code == 200) {
              this.contentList = res.data
            }
          })
        }
      })
    },
    EditHandler(data) {
      this.$refs.dialog.open()
      this.openName = '修改收藏'
      this.getcollect()
      this.form = {
        webName: data.collect_name,
        webUrl: data.collect_url,
        titleId: data.parent_id,
        UserId: localStorage.getItem('userId'),
        ContentId: data.collect_id
      }
    }
  },
  mounted() {
    getCollectTitleList({ UserId: localStorage.getItem('userId') }).then(res => {
      this.active = res.data[0]?.id
      this.title = res.data[0]?.collect_title
      getCollectContent({ UserId: localStorage.getItem('userId'), titleId: res.data[0]?.id }).then(res => {
        if (res.code == 200) {
          this.contentList = res.data
        }
      })
    })

  }
}
</script>

<style lang="scss" scoped>
.app-home {
  .app-home-title-list {
    position: relative;
  }
  .directory-box {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 150px;
    height: 300px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.3s;
  }
  .open {
    opacity: 1;
  }
  .active {
    color: #b33f3f !important;
  }
  .app-home-content {
    width: 1000px;
    height: 600px;
    background: rgba($color: #000000, $alpha: 0.4);
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-45%, -60%);
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    padding: 20px;
    overflow-y: auto;
  }
  .addCollect {
    width: 100px;
    height: 50px;
    position: absolute;
    right: 30px;
    top: 10px;
    line-height: 50px;
    background: rgb(61, 54, 54);
    text-align: center;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
  }
  :deep(.el-dialog) {
    width: 500px;
    // height: 300px;
  }
  .icon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
  }
}
</style>